<template>
    <SearchForm v-if="CommonStore.showSearch" :FormConfig :FormValue="UserStore.searchForm" />

    <!-- <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-input allowClear style="width:40%" placeholder="用户名" v-model:value="UserStore.searchForm.userName" />
        <a-input allowClear style="width:40%" placeholder="科室" v-model:value="UserStore.searchForm.department" />
        <a-button @click="UserStore.queryUser">
            <template #icon>
                <SearchOutlined />
            </template>
</a-button>
<a-button type="primary" @click="addFormRef.open = true">
    <template #icon>
                <PlusOutlined />
            </template>
</a-button>
</a-input-group> -->

    <!-- <Scroll maxHeight="9rem"> -->

    <a-card>
        <a-spin :spinning="UserStore.loading">
            <a-table bordered :scroll :columns :pagination="UserStore.searchForm" :dataSource="UserStore.tableData"
                @change="UserStore.queryUser">
                <template #bodyCell="{ text, record, index, column }">
                    <template v-if="column.dataIndex === 'action'">
                        <div>
                            <Btn permission="edit" type="link"
                                @click="() => { UserStore.editForm = { ...record }; editFormRef.open = true }">编辑
                            </Btn>
                            <a-popconfirm title="此操作不可逆，是否继续？" ok-text="确定" cancel-text="取消"
                                @confirm="UserStore.deleteUser(record.id)" @cancel="EventBus.emit('CancleInfo')">
                                <Btn permission="delete" type="link">删除</Btn>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </a-table>
        </a-spin>
    </a-card>
    <!-- </Scroll> -->

    <!-- 添加 -->
    <ModalForm ref="addFormRef" @close="addFormRef.open = false" type="add" :okFn="UserStore.addUser"
        :FormValue="UserStore.addForm" :rules="addFormRules" :FormConfig="addFormConfig" />

    <!-- 修改 -->
    <ModalForm ref="editFormRef" @close="editFormRef.open = false" type="edit" :okFn="UserStore.editUser"
        :FormValue="UserStore.editForm" :rules="editFormRules" :FormConfig="editFormConfig" />

</template>
<script lang='ts' setup>
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { useCommon } from '@/stores/Common';
import { useUser } from '@/stores/User';
import { searchConfig, addConfig, editConfig, columns, searchSelfConfig } from '@/config/User';

import { createForm } from '@/utils/CreateForm';
import { createBtns } from '@/utils/createPermissionBtns';
import { provide, ref, inject, type Ref, onUnmounted } from 'vue';
import EventBus from '@/utils/EventBus';
import { useTableScroll } from '@/utils/GetTableScroll';
import { debounce } from 'lodash';

const scroll = useTableScroll('searchCard')
const CommonStore = useCommon()


const { FormConfig } = new createForm(CommonStore.department != '检验科' ? searchSelfConfig : searchConfig, { layout: 'inline', labelAlign: 'right', labelCol: { span: 5 } },)
const { FormConfig: addFormConfig, FormRules: addFormRules } = new createForm(addConfig)
const { FormConfig: editFormConfig, FormRules: editFormRules } = new createForm(editConfig)
const UserStore = useUser()

const addFormRef = ref()
const editFormRef = ref()

UserStore.queryUser()



provide('permissionBtns', createBtns({
    query: debounce(() => {
        UserStore.searchForm.pageNo = 1
        UserStore.queryUser()
    }, 1000),
    add: () => addFormRef.value.open = true,
}))

onUnmounted(() => {
    UserStore.$reset()
})

</script>
<style lang='scss' scoped></style>